<template>
  <div class="dqContainer">
    <a href="home">
      <span class="fa fa-angle-left icon"></span>
    </a>
    <div class="header">
      <span class="active">大陆</span>
      <span>港台</span>
    </div>
    <search :lblist ="lblist" :dzclick ="dzclick" ></search>

    <div class="item">
      <p class="cxxz">当前城市</p>
      <div class="content">
        <div class="btn">{{this.$store.state.city}}</div>
      </div>
    </div>
    <div class="item">
      <p>字母排序</p>
      <div class="content">
        <div
          style="padding:0;margin:0;border-radius:0;"
          class="btn"
          v-for="item in alist"
          :key="item.it"
        >
          <a style="color:#000;" :href="item.it">{{item.items}}</a>
        </div>
      </div>
    </div>
    <div class="item">
      <p>热门城市</p>
      <div class="content">
        <div class="btn" v-for="item in rmlist" :key="item.id" @click="dzclick(item.name)">{{item.name}}</div>
      </div>
    </div>
    <div class="item" v-for="(item,key) in lblist" :key="key">
      <p :id="key">{{key}}</p>
      <div class="content">
        <ul>
          <li v-for="list in item" :key="list.id" @click="dzclick(list.name)">{{list.name}} </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import search from "./components/search";
export default {
  components: { search },
  data() {
    return {
      rmlist: [],
      lblist: [],
      alist:[]
    };
  },
  methods: {
    getList() {
      axios.get("api/city.json").then(res => {
        var data = res.data
        this.rmlist = data.data.hotCities
        this.lblist = data.data.cities
        this.alist=data.data.alist
      })
    },
    dzclick (city) {
         localStorage.city = city
        this.$store.commit("getlist",city)
        this.$router.push('/')
    }
  },
  mounted() {
    this.getList()
  }
};
</script>

<style lang='less' scoped>
@font: 100px;
.dqContainer {
  font-size: 13rem / @font;
  .item-right {
    position: absolute;
    right: 20px;

    top: 100px;
    z-index: 1;
  }
  .icon {
    font-size: 30rem / @font;
    position: absolute;
    left: 15rem / @font;
    top: 15rem / @font;
    color: #fff;
  }
  .header {
    height: 45rem / @font;
    width: 100%;
    background: #00bcd4;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    .active {
      background: #fff;
      color: #00bcd4;
    }
    span {
      font-size: 14rem / @font;
      color: #fff;
      width: 70rem / @font;
      height: 20rem / @font;
      text-align: center;
      line-height: 20rem / @font;
      border: 1px solid #fff;
      border-radius: 5rem / @font;
    }
  }

  .item {
    p {
      padding-left: 15px;
      font-size: 15rem / @font;
      line-height: 30rem / @font;
    }
    .content {
      border: 1px solid #ddd;
      background: #fff;
      display: flex;
      flex-wrap: wrap;
      .btn {
        margin: 5px 0 10px 15px;
        width: 25%;
        height: 30rem / @font;
        border: 1px solid #ddd;
        border-radius: 5rem / @font;
        line-height: 30rem / @font;
        text-align: center;
      }
      ul {
        width: 100%;
        li {
          line-height: 30rem / @font;
          border-bottom: #ccc;
          padding-left: 10px;
          float: left;
          border: 1px solid #eee;
          width: 25%;
          text-align: center;
        }
      }
    }
  }
}
</style>
